<template>
	<view class="ys">
		<y-header></y-header>
		<view class="userbody">
			<view class="pc">
				<y-bread :name="pageName"></y-bread>
			</view>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right" v-if="order">
					<view class="orderdetail">
						<view class="detail-num">
							<view class="detail-no">
								{{$t('index.gwcbh')}}：{{order.order_no}}
							</view>
							<view class="cancle" v-if="order.pay_status.value == 10">
								<text @click="cancleOrder">{{$t('index.qxdd')}}</text>
							</view>
						</view>
						<view class="goodsinfo">
							<view class="goods" v-for="(item,index) in order.goods" :key="index">
								<view class="goods-no">
									<text>{{$t('index.sp')}}{{index+1}}</text>
								</view>
								<view class="goods-del">
									<view class="imgbox">
										<image :src="item.goods_info.cover_path" mode="widthFix"></image>
									</view>
									<view class="goods-name">
										{{item.goods_info.name}}
									</view>
								</view>
								<view class="goods-order">
									<ul class="orderleft">
										<li>{{$t('index.ddzt')}}</li>
										<li>{{$t('index.dj')}}</li>
										<li>{{$t('index.ddsl')}}</li>
										<li>{{$t('index.sfje')}}</li>
									</ul>
									<ul class="orderright">
										<li>{{order.pay_status.text}}</li>
										<li>${{item.goods_info.price}}</li>
										<li>{{item.total_num}}</li>
										<li>${{item.total_price}}</li>
									</ul>
								</view>
								<!-- <view class="goodsfoot">
									<view class="foot-l">
										实付运费：$0
									</view>
								</view> -->
							</view>
							<view class="detail-box">
								<view class="detail-title">
									<text>{{$t('index.fkzx')}}</text>
								</view>
								<view class="detail-content">
									<view class="goods-order">
										<ul class="orderleft">
											<li>{{$t('index.ddje')}}</li>
											<li>{{$t('index.fkfs')}}</li>
										</ul>
										<ul class="orderright">
											<li>${{order.pay_amount}}</li>
											<li>
												<view class="li-item">
													{{order.pay_type.text}}
												</view>
												<!-- <view class="li-item">
													轉帳金額<text>NT$3,960</text>
												</view> -->
												<view class="li-item">
													{{$t('index.zfsj')}}<text>{{order.pay_time}}</text>
												</view>
											</li>
										</ul>
									</view>
								</view>
							</view>
							<view class="detail-box">
								<view class="detail-title">
									<text>{{$t('index.pszx')}}</text>
								</view>
								<view class="detail-content">
									<view class="goods-order">
										<ul class="orderleft">
											<li>{{$t('index.psfs')}}</li>
											<li>{{$t('index.sjr')}}</li>
											<li>{{$t('index.psdz')}}</li>
											<li>{{$t('index.lxdh')}}</li>
										</ul>
										<ul class="orderright" v-if="order.delivery_type.value == 10">
											<li>{{order.delivery_type.text}}</li>
											<li>{{order.name}}</li>
											<li>{{order.address}}</li>
											<li>{{order.phone}}</li>
										</ul>
										<ul class="orderright" v-else>
											<li>{{order.delivery_type.text}}</li>
											<li></li>
											<li></li>
											<li></li>
										</ul>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<y-model :modelMsg="modelMsg" :showModel="showModel" @getModel="getModel"></y-model>
	</view>
</template>

<script>
	import {
		OrderDetail
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.ddcx'),
				modelMsg: this.$t('index.qrqx'),
				showModel: false,
				order_id: '',
				order: ''
			}
		},
		onLoad(e) {
			if (e.id) {
				this.order_id = e.id
				this.OrderDetail()
			}
		},
		methods: {
			OrderDetail() {
				OrderDetail({
					id: this.order_id
				}).then(res => {
					if (res.code == 0) {
						this.order = res.data.order
					}
				})
			},
			getModel(e) {
				this.showModel = false
				if (e) {
					uni.$showMsg(this.$t('index.czcg'))
				}
			},
			cancleOrder(item) {
				this.showModel = true
			},
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		padding: 10px;
		box-sizing: border-box;
	}

	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-bottom: 20px;

			.orderdetail {
				font-size: 14px;
				margin: 10px auto;
				padding-bottom: 30px;
				background-color: #fdfdfd;
				border: 1px solid #dadada;
				border-radius: 3px;

				.detail-num {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15px 30px;
					background-color: #f1f4f6;
					font-size: 16px;

					.cancle {
						color: #428bca;
					}
				}

				.goodsinfo {
					padding: 10px 30px 15px;
					background-color: #fff;
				}

				.detail-box {
					background-color: #fdfdfd;
					padding: 10px 0;

					.detail-title {
						font-weight: bold;
						margin-bottom: 10px;
						line-height: initial;
						color: #595959;
						font-size: 16px;

						text {
							padding-left: 5px;
							border-left: 4px solid #95a9bc;
						}
					}

					.detail-content {
						border: solid 1px #e1e1e1;
					}

				}


			}

			.goods {
				border: solid 1px #e2e2e2;

				.goods-no {
					padding: 5px 10px;
					background-color: #c8d0d7;
					color: #fff;
					line-height: 22px;
				}

				.goods-del {
					display: flex;
					padding: 16px;
					border-bottom: dotted 1px #e1e1e1;

					.imgbox {
						width: 100px;
						height: 100px;

						image {
							width: 100px;
						}
					}

					.goods-name {
						width: calc(100% - 100px);
						padding-left: 10px;
						box-sizing: border-box;
					}
				}

			}

			.goods-order {
				display: flex;
				align-content: center;
				color: #595959;

				li {
					box-sizing: border-box;
					padding: 8px 10px;
				}

				.orderleft {
					width: 25%;
					background: #f1f4f6;

					li {
						text-align: right;
					}
				}

				.orderright {
					width: 75%;

					li {
						background-color: #fff;
						border-bottom: dotted 1px #efefef;
						text-align: left;

						.li-item {
							height: 30px;
							line-height: 30px;

							text {
								margin-left: 10px;
							}
						}
					}
				}
			}

			.goodsfoot {
				background-color: #edf3f8;
				border-color: #edf3f8;
				padding: 10px 20px 10px;
				margin-top: 10px;
				font-size: 16px;
			}
		}
	}

	@media (max-width:768px) {
		.userbody {
			padding: 10px 0;
		}

		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;

				.orderdetail {

					.goodsinfo {
						padding: 10px;
					}

					.detail-num {
						padding: 15px;
					}
				}
			}
		}

		.usertop {
			display: none;
		}

		.pc {
			display: none;
		}
	}
</style>